<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>

<body>
    <div id="app">
        <label for="check">
             汉堡包<input type="checkbox" v-model="message" @click="checkClick" id="check">
        </label>
        <h2>{{message}}</h2>
       <hr> 
        <label for="man">
            男<input type="radio" id="man" name="gender" v-model="gender" value="man">
        </label>
        <label for="woman">
            女<input type="radio" id="woman" name="gender" v-model="gender" value="woman">
        </label>
        <h2>{{gender}}</h2>

        <hr>
        <select name="fruit" id="" v-model="fruit">
            <option value="apple">苹果</option>
            <option value="orange">橘子</option>
            <option value="banana">香蕉</option>
            <option value="cherry">樱桃</option>
        </select>
        <h2>{{fruit}}</h2>

        <hr>
        <!-- 多选 -->
         <select multiple name="fruits" size="3" id="" v-model="fruits">
            <option value="apple">苹果</option>
            <option value="orange">橘子</option>
            <option value="banana">香蕉</option>
            <option value="cherry">樱桃</option>
        </select>
        <h2>{{fruits}}</h2>
    </div>
    <script src="../lib/Vue.js"></script>
    <script>
        const app = Vue.createApp({
            data: function () {
               return{
                    message:"aaa",
                    gender:"man",
                    fruit:[],
                    fruits:[]
               }
            },
            methods: {
                checkClick()
                {
                    console.log(this.message);
                }
            }
        });
        app.mount("#app");
    </script>
</body>
</html>